<script>

const menus = [
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '个人信息'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '修改密码'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '用户管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '房间分类管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '房间管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '系统管理/轮播图管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '系统管理/用户权限管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '房间预定管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '评价反馈管理'
    },
    {
        menuIcon: 'Location',
        menuPath: '/myDetail',
        menuComponent: '../views/common/userInfo/Detail.vue',
        menuName: '房间历史记录管理'
    },

]

export default {
    data() {
        return {
            menus: menus
        }
    }
}
</script>

<template>
    <div id="home-aside">
        <el-scrollbar class="menu-vertical">
            <el-menu class="menu-vertical" router>

                <el-menu-item v-for="(item, index) in menus" :key="index" :index="item.menuPath">
                    <el-icon :class="item.menuIcon" />
                    <span>{{ item.menuName }}</span>
                </el-menu-item>

            </el-menu>
        </el-scrollbar>
    </div>
</template>


<style scoped>
.menu-vertical {
    height: 100%;
    width: 160px;
}
</style>